SciFi Hive Platform - Participant Interface

1. Participant Interface

As a SciFi Hive participant, you'll be led by a Beekeeper through several SciFi Hive sections as you develop a Hero's journey story about an unlimited future as you collaborate within a small team called a Hive as well as with all of the participants.


There are a lot of pieces to the interface so let's start going through them.


You can also walk through the different parts of the interface by clicking on the ? in each of the left side tiles.


Participant Interface
1.1. Sessions in the Workshop

There way be multiple sessions in your SciFi Hive swarm. To see the dates/times for each session, click on the Sessions button at the top of the interface.

Sessions in the Workshop
1.2. View the participants

As we mentioned, you'll be working in a team called a Hive during the SciFi Hive. To see who's in your Hive, other Hives, or view the Beekeeper or Facilitators, click on the Participants button at the top of the interface.

View the participants
1.3. Swarm

The Swarm tile is where you'll access the video conference rooms during the SciFi Hive if you haven't popped out the video window.


If you have the video window popped out, there will just be a message here to close the popout window to return the video to the Swarm tile.


Note: By default, you don't automatically enter a video conference room (main swarm room or hive room) when you enter the interface as there may be times that you will be working independently inside the interface.

Swarm
1.4. The conference rooms

During a SciFi Hive, there are 2 different types of video conference rooms.

  1. The swarm room - this is the main room where all participants will get together to receive instructions and to share after each section
  2. Hive room - this is the breakout room that your Hive will get together in as you collaborate during the different sections of the SciFi Hive swarm.

Join the swarm room by clicking on the "Join swarm room" button or join your Hive room by clicking on the "Join hive room" button.

The conference rooms
1.4.1. What room are you in

Whenever you're in a conference room, the name of the room you're in will be shown at the top of the screen.


If you're in the main swarm room it will display the name of the SciFi Hive Swarm. If you're in your hive room it will display the name of your hive.

What room are you in
1.4.2. Getting help while in your hive

At any time when you're in your hive if you'd like a Beekeeper or Facilitator to come join you, just click on the "Ask beekeeper to visit" button. Please be patient as they may be busy with other hives.


Note: This button isn't available in the Main swarm room as this is where everyone comes together anyways.

Getting help while in your hive
1.4.3. Popout the video conference window

Once you're in the conference room you can also pop the video conference window out into a new window by clicking on the popout button on the top right hand corner. Once you get working in your hives you'll want to do this so you can work in the interface and see everyone at the same time (assuming you have enough screen real estate to do that).


Click on the "Leave room" button to exit the video conference but remain in the SciFi Hive interface. Closing the SciFi hive interface will also remove you from any video conference rooms.

Popout the video conference window
2. Explore

Exploration is the first step in expanding your mindset in a SciFi Hive.


You can use this interface to search directly in YouTube or you can go to Google, YouTube, or any other search engine to find information.


Click on the ? on the tile to do a step by step walk through of the interface.

Explore
2.1. Search for videos

From within the interface, you can search for YouTube videos related to a topic. Just enter a search term in the search box and click on the magnifying glass to search.

Search for videos
2.1.1. Preview videos

Click any of the videos to preview them right inside the interface.

Preview videos
2.1.2. Save exploration

Once you find a video that relates to the topic that shows an opportunity, click on the save icon to add it as one of your explorations.

Save exploration
2.1.2.1. Complete the information

The Title, Link, Description, and Tags should be automatically filled in for you.


You need to just complete the Type and Opportunity.

Complete the information
2.1.2.2. Type

Choose wich of the following types are depicted in the exploration item:

  • Contextual change - a change to the way things work in the world that has impact on the future
  • Disruptive tech - a disruptive technology that will create new opportunities
  • Business Model - a new way of operating or doing business
  • Global Challenge - a global challenge that has potential to be solved in your future
Type
2.1.2.3. Opportunity

Describe a potential opportunity that you're able to glean out of this exploration item.

Opportunity
2.1.2.4. Save your item

Once you save your item, you'll see that the Leaderboard count will update with your total exploration items. Try to beat your other hive members for the number of exploration items you've collected.

Save your item
2.2. Manually adding an exploration item

You can also add an exploration item from anywhere by clicking on the "+" button.

Manually adding an exploration item
2.2.1. Add a title
Add a title
2.2.2. Paste the link from the internet

You can paste in the link to really anything you can find on the internet.

Paste the link from the internet
2.2.3. Choose the type

Just like in the platform search, choose the type for the video.

Choose the type
2.2.4. Opportunity

Describe a potential opportunity that you're able to glean out of this exploration item.

Opportunity
2.2.5. Description

Describe/summarize the exploration item.

Description
2.2.6. Tags

Add some tags related to the exploration item. Comma separate multiple tags.

Tags
2.2.7. Save your item

Once you save your item, you'll see that the Leaderboard count will update with your total exploration items. Try to beat your other hive members for the number of exploration items you've collected.

Save your item
2.3. Edit your exploration

You can double click on your exploration items to edit it.


Note: you can only edit your exploration items.

Edit your exploration
2.4. Removing explorations

You can select an exploration item and click on the "Minus" button to remove the exploration item. It will also be removed from the Leaderbord count.


Note: you can only remove your exploration items.

Removing explorations
3. Futurescape

Welcome to the Futurescape screen.


On this screen you'll work with your hive to brainstorm ideas about the utopian future vision you want together. This works just like a wall that you attach sticky notes to.


Add as many ideas for your utopian future as you can. We suggest that you start with a few minutes of quiet time where everyone is adding their ideas to the board. Once that dies down a bit, start discussing each of the ideas and cross pollinating them with other ideas to expand thinking.


Remember, you want to think 20+ years out to what's impossible if there are no barriers to getting there. It needs to be grounded in science (not magic). Keep in mind the fact that technology is improving exponentially at a rate that is many times faster than ever before in history.

Futurescape
3.1. Adding a sticky

Adding a new sticky is as easy as clicking on the "Add New Sticky" button.

The new sticky will be Gray in color as you edit it.


Add your idea to the sticky board and add your idea.


Adding a sticky
3.2. Editing sticky's

Everyone can edit everyone's sticky's. During a SciFi Hive, once an idea is shared it can be expanded and collaborated on.


Note: If a sticky is Gray it means someone else is editing it.


Editing sticky's
3.3. Rearranging sticky's

When you start getting near to the end of the Futurescaping time, spend a little time rearranging your ideas (just drag and drop them) into groupings and deciding on what components will be part of your future vision.


Note: Be sure to get ready to have someone share some of your ideas.


Rearranging sticky's
4. Story Development

Welcome to the Story Development screen.


On this screen you'll work with your hive to brainstorm a compelling Hero's Journey story around the path to your utopian future vision. We find it's best if you choose one person to be the scribe, facilitating the discussion and filling out the boxes as you go.


You can be very creative here on what the storyline looks like...maybe you're a grandparent looking back as you tell the story from the future...maybe your fighting the battles to create the change you want...let your imaginations run wild.


This isn't a linear process so expect to be jumping around from box to box as your brainstorm.


Let's briefly summarize what content should go in each box but don't worry if your ideas are in the right box or not.


The main point is that you formulate and finalize a compelling story line.

Story Development
4.1. Define your character

In this box, define your main character(s). Usually there are only a small number of characters in the storyline with one main character.


Who are they, what are their key characteristics, what differentiates them from others?

Define your character
4.2. Call to action

What prompts your hero to take action?


What event/hardship/observation occurs that makes your hero want to change.

Call to action
4.3. Refusal to engage

What discourages them from taking action?


We all want to change but change is difficult. What are the reasons this change is hard for your character.

Refusal to engage
4.4. Enter the mentor

A mentor comes along to provide guidance and wisdom for the journey.


In a hero's journey there's usually a mentor or someone who shows the main character that change is possible if they open their mind to new ways. Who would be the mentor for your character and how do they help thim shift their thinking.

Enter the mentor
4.5. Commit and Challenge

The hero commits to the journey and faces challenges and tests as they work towards the vision/goal. Along the way they meet friends and foes and build a team. This contains a large potion of the story.


Of course it won't be easy to get to that utopian 20+ year out future so what are some of the hurdles and challenges that need to be overcome and how do you see those being overcome in the future.


This is where the earlier exploration comes in handly. Pull from your exploration the opporunities to overcome these obstacles.

Commit and Challenge
4.6. Climax

This is the climax where the vision is attained...usually this takes place within a crowning test for your hero.


This usually is the "final straw" that forces the hero to change. Something that pushes them beyond some limitation that makes it better to change than stay the same.

Climax
4.7. The return

The vision has been achieved...what does the new world look like, how is the hero better off, what insight/knowledge was gained, what problems have been solved?


Here you can show the new utopian future that comes as the result of the change attained by the hero.

The return
5. Comic Prototype

Now the fun really starts. This is a very chaotic portion of the SciFi Hive but also a lot of fun.


The hives bring their stories to life as they create a digital prototype of their comic that can later be used to create a professional comic and glean out potential initiatives to take a step towards their future vision.


Creation of the comic prototype is split into 2 parts.

  1. Writing the script
  2. Creating the comic panels

As with many things during the SciFi Hive collaboration, this is not a linear process but rather an iterative one. You might even shift your story and add new components that weren't in your story development or even in your futurescaping at this point.


There is a lot of functionality in this screen so let's go through it all. Like all of the other screens, it might be good to start by clicking on the ? in the tile to complete a step by step walk through of creating a comic page.

Comic Prototype
5.1. Toggle to Script writing mode

Within comic prototyping you can toggle back and forth between the 2 different modes by using the toggle button.


  1. Writing the script - starts with a blank description and dialogue for each panel
  2. Creating the comic panels - starts with a blank panel

Click the toggle mode button now to toggle to the script writing mode (should be blue and have a pen on it if you are in script writing mode).



Toggle to Script writing mode
5.1.1. Adding a panel

The first thing you need to do is add a panel to the comic. To do this, click on the add panel button.


This will add a new panel to the panel list

Adding a panel
5.1.2. Writing the Script

Select the panel in the panel list and if the Description and make sure that the script toggle button is selected.


Description

Fill out a description of the panel with as many descriptive words as possible. This will be used later when creating the comic panel prototype and you'll likely split up the work so it may be someone else creating the panel. This is also used by professional artists if the comic get's developed further into a professional comic.


Dialogue

Dialogue is the speech bubbles you usually see in comics. Be sure to also be very descriptive here and include who's dialogue is it. Are they thinking, speaking, crying, yelling, etc... and to whom is the dialogue directed.

Writing the Script
5.1.3. Keep adding panels to complete your script

It's best to complete the whole script before you start working on the comic prototype. This ensures a cohesive story and avoids any comic prototype rework as well as allows you to then parcel out sections of the panel prototyping to different team members.


It will be necessary to divide and conquer when you get to the comic prototyping in order to get it completed within the SciFi Hive time constraints. Don't worry though, the platform will be open to your hive for some time after the SciFi Hive swarm so you could continue to work after the Swarm is complete.

Keep adding panels to complete your script
5.2. Toggle to Comic Prototype mode

Now it's time to create the actual comic prototype.


Click on the mode toggle button to change to the Comic prototyping mode. There should now be a blank panel on the screen and the mode toggle button will have a paintbrush on it.

Toggle to Comic Prototype mode
5.2.1. Creating the Comic Panels

Now that you're in the comic prototyping phase, it's best to divide the panels up evenly amongst the team and start working independently on your panels. Be sure to actively communicate though to ensure you are using similar images for the characters and backgrounds.


Don't worry about perfection, the point is to create a prototype to help get your story across visually. If your comic goes off to a professional artist after the SciFi Hive swarm, getting your vision of what it will look and feel like will be very important to the artist.


Select the panel you want to work on to get started.

Creating the Comic Panels
5.2.1.1. Panel Properties

Click on the properties button on the toolbar to view the properties popout on the right side.


Properties are:

  • Order - this can be changed by dragging and dropping the panels within the panel list
  • Name - You can give each panel a name
  • Panel Size
  • Title panel - the panel will consume an entire page of the comic and have the SciFi Hive header added to the top
  • Full Width Panel - this panel will be the full width of a page and take up 1 of 3 rows on the page
  • 1/2 Width Panel - this panel will be 1/2 the width of 1 row on the page
  • 1/3 Width Panel - this panel will be 1/3 the width of 1 row on the page
  • 1/4 Width Panel - this panel will be 1/4 the width of 1 row on the page
  • Description - shows the description that was created earlier in the script writing phase
  • Dialoge - shows the dialogue that was created earlier in the script writing phase.

Panel Properties
5.2.1.2. Adding a Background

The comic image get's built by adding layers of images onto the panel. We'll talk a bit more about layers in a bit once we have a few images on the panel.


Let's start by adding a background.

  • Click on the backgorunds button then drag and drop a background from the backgrounds list or double click on the background you want to add

Note : You can also add any image copied image if you don't like any of the built in backgrounds. See the Adding images from Google tutorial to learn how.

Adding a Background
5.2.1.2.1. Resizing and moving an image

To adjust the background (or any image on the panel)...


  • resize : click on the image to get into edit mode then use the sizer points on each corner and each size to resize the image
  • move : click anywhere in the image and drag the image to move it around within the panel
  • remove : click on the x in the middle of the image to remove it

Resizing and moving an image
Edit Mode
When in edit mode, you'll see the panel boundaries in dotted lines. Anything outside of the dotted lines will be hidden in the final panel.
5.2.1.3. Adding a character

Now that we have our background, let's add our main character (Bob).


  • click on the people button
  • double click on the character you want (or drag and drop them onto the panel)
  • move and resize as necessary

Note : You can also add any image copied image if you don't like any of the built in backgrounds. See the Adding images from Google tutorial to learn how.

Adding a character
5.2.1.4. Adding an Object

Bob needs his truck now...let's add the truck. All images are added in exactly the same way...they're just separated out in the toolbar for ease of use.

  • click on the objects toolbar
  • search for a truck
  • double click on the one you like or drag and drop it onto the panel
  • move and resize as necessary

Note : You can also add any image copied image if you don't like any of the built in backgrounds. See the Adding images from Google tutorial to learn how.

Adding an Object
5.2.1.5. Use Pixabay

I didn't really like the images for trucks that were built in so I used the pixabay option to search pixabay for an image.

  • click on the pixabay button
  • search for what you're looking for (enter the description and press enter)
  • double click or drag and drop the image you like
  • move and resize as needed

Note : You can also add any image copied image if you don't like any of the built in backgrounds. See the Adding images from Google tutorial to learn how.

Use Pixabay
5.2.1.6. Sounds

There are a few other image types available on the button bar but they all work the same way so I won't bother adding them to the panel.


The sounds button has classic cartoon visual sounds like BOOM!!!, BANG!


Sounds
5.2.1.7. Images already used

Since you've broken up the comic into pieces and dived the work amonst the hive, this button will be really useful. This will allow you to easily re-use images that have already been used in the other panels and will help you're hive to create a consistent look and feel.


Images already used
5.2.1.8. Adding a caption

Finally, we get to adding the dialogue that you wrote earlier in your script. To add a caption...

  • click on the captions button
  • choose an appropriate caption bubble for the dialogue
  • thoughts are usually in the clouds
  • yelling has sharp edges
  • otherwise use a bubble that doesn't hide too much of the image
  • double click or drag the caption onto the panel
  • click on the caption to edit the text
  • move and resize as necessary to make the text fit
Adding a caption
5.2.1.9. Setting the name for an image

By default, each image will be given a name. You might want to change the name of the image so it's easier to identify later (like when you're reordering images in the next step).


To rename an image...

  • click on the image
  • click on the properties button
  • click in the Name field
  • enter the new name
  • click off the name field
Setting the name for an image
5.2.1.10. Reordering your layers

The final thing you might want to do is reorder your image layers.


The layers are drawn onto the screen one at a time overlaying each other as you add them. There may be times when you need to change that order. You do this with the layers button.


Let's move Bob in front of his truck.

  • click on the layers button
  • drag and drop Bob so he's on top of his truck
Reordering your layers
5.3. Adding a title page

One thing you might want to consider is to add 1 more panel to the beginning of your comic as a title page.


To do this, just click on the add panel and drag and drop that new panel to the beginning of the list.

Adding a title page
5.3.1. Configuring a title page

To set up the properties for any page, click on the properties button (wrench) on the top toolbar.


The panel size for a title page is "Title Page". By default this will add a SciFi Hive header to your comic as well.


As soon as you change the panel size, the panel list will also update with a preview of the page and comic layout.

Configuring a title page
5.3.2. Adding Title Text

You might want to add a fancy title to your title page. To do this...

  • click on the title button
  • Enter your title text
  • Choose a fancy font
  • Pick a color for the title
  • If you're happy with the preview
  • Click on add to Panel
  • Move and resize as necessary
Adding Title Text
warning-filled
TItle pages automatically have the SciFi Hive header added so don't put text to close to the top of the page.
6. Generate Comic
Generate Comic